<template>
	<view>
		<view class="" v-if="isShow&&rececordList.length">
			<view class="tips">
				<text class="dot">●</text>明细清单,左滑操作更多
			</view>
			<slideOperation :list="rececordList" :options="options" @optionClick="optionClick" />
			<view class="no-more" v-if="noMore">
				没有更多啦...
			</view>
			<view class="no-more" v-if="isShow&&rececordList.length<total">
				上拉可以加载更多┗|｀O′|┛ 嗷~~
			</view>
		</view>
		<view class="img" v-else-if="isShow&&!rececordList.length">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fac3f363-66dc-48a8-b358-79fd0858441a/5cb36826-9dbb-40d7-ba81-20026578b42b.jpg" mode=""></image>
			<view class="no-tip">
				快去记录你的日常吧!
			</view>
		</view>
	</view>
</template>

<script>
	import slideOperation from '../../components/slideOperation/slideOperation.vue';
	import { formatDate } from '../../utils/time.js'
	export default {
		components: {
			slideOperation
		},
		data() {
			return {
				rececordList: [],
				page:1,
				pageSize:10,
				isShow:false,
				noMore:false,
				total:0,
				options: [ //左滑的操作列表
					{
						color: '#ffffff',
						bgColor: '#409EFF',
						text: '修改',
						width: 120,
						type:'edit'
					},
					{
						color: '#ffffff', //字体颜色，非必须，默认 #ffffff
						bgColor: '#FF4058', //背景颜色，非必须，默认 #409EFF
						text: '删除', //展示文字 
						width: 120, //按钮宽度 默认120rpx 适合两个字的宽度 这个宽度按需调整
						type:'del'
					}
				],
			}
		},
		onPullDownRefresh() {
			this.pageSize+=10;
			if(this.total<=this.rececordList.length) {
				uni.stopPullDownRefresh()
				this.noMore = true;
				return
			}
			this.getRecordList()
		},
		onShow() {
			this.total = 0;
			this.rececordList = [];
			this.pageSize = 10;
			this.isShow = false;
			this.noMore = false;
			uni.showLoading({
				title: '正在获取明细 '
			})
			this.getRecordList();
		},
		methods: {
			getRecordList() {	
				uniCloud.callFunction({
					name: 'record',
					data: {
						action: 'recordOut',
						params: {
							type: 0,
							uid: uni.getStorageSync('userInfo')._id,
							page:this.page,
							pageSize:this.pageSize
						}
					},
					success: (res) => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.rececordList = res.result.list;
						this.total = res.result.total;
						if(this.rececordList.length>=res.result.total){
							this.noMore = true;
						}
						this.rececordList.forEach(row => {
							row.date = formatDate(new Date(row.date)) 
						})
						this.isShow = true;
					},
					fail: () => {
						uni.hideLoading()
					}
				})
			},
			//删除编辑
			optionClick(item,operateType){
				if(operateType == 'del'){
					uni.showLoading()
					uniCloud.callFunction({
						name:'record',
						data:{
							action:'del',
							params:{
								user_id:item.user_id,
								_id:item._id
							}
						},
						success: (res) => {
							uni.hideLoading();
							uni.showToast({
								title:res.result.msg,
								success: () => {
									this.getRecordList()
								}
							})
						},
						fail: () => {
							uni.hideLoading()
						}
					})
				}else{
					uni.setStorageSync('edit',item);
					uni.switchTab({
						url:'../bookkeeping/bookkeeping'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.cotent{
	display: flex;
	align-items: center;
	padding-left: 20rpx;
	font-size: 28rpx;
	color:#1296DB;
	.image {
		width: 50rpx;
		height: 50rpx;
	}
	.text{
		margin-left: 20rpx;
	}
	.price{
		color:#000
	}
}
.no-more{
	margin: 20rpx 0;
	text-align: center;
	color: gray;
}
.tips{
	border-bottom: 1rpx solid #F5F5F5;
	padding: 20rpx 0;
	color:#666;
	.dot{
		font-size: 40rpx;
		color:#1296DB;
		margin:0 20rpx;
	}
}
.img{
	width: 100%;
	.image{
		width: 100%;
		height: 400rpx;
	}
	.no-tip{
		margin-top: 20rpx;
		text-align: center;
		color: gray;
	}
}
</style>
